osdWindow: Reuse BarLevel drawing functionality

Reuse the BarLevel class to get similar drawing behavior as Slider.
Rename theme css impacted properties and ensure that the osdWindow
remains accessible.
Ensure we don't force setting a custom border color like on the OSD.

https://bugzilla.gnome.org/show_bug.cgi?id=790280.

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index de107d7b71fb515309ccf6d4f159552fe6678240..dd6287f8eef1ff3202e88bdd796e5060af48c8d0 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -585,13 +585,9 @@ StScrollBar {
   .osd-monitor-label { font-size: 3em; }
   .level {
     height: 0.6em;
-    border-radius: 0.3em;
-    background-color: transparentize(darken($osd_bg_color,15%),0.5);
-    color: $osd_fg_color;
-  }
-  .level-bar {
-    background-color: $osd_fg_color;
-    border-radius: 0.3em;
+    -barlevel-height: 0.6em;
+    -barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5);
+    -barlevel-active-background-color: $osd_fg_color;
   }
 }
 

diff --git a/js/ui/barLevel.js b/js/ui/barLevel.js
index c018ef31be97a04f002c1b0d239db717a1661542..2b35496b44a871acb4aac8e8a14482c12b9b2cac 100644 (file)
--- a/js/ui/barLevel.js
+++ b/js/ui/barLevel.js
@@ -60,9 +60,15 @@ var BarLevel = new Lang.Class({
         let barLevelColor = themeNode.get_color('-barlevel-background-color');
         let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
 
-        let barLevelBorderWidth = themeNode.get_length('-barlevel-border-width');
-        let barLevelBorderColor = themeNode.get_color('-barlevel-border-color');
-        let barLevelActiveBorderColor = themeNode.get_color('-barlevel-active-border-color');
+        let barLevelBorderWidth = Math.min(themeNode.get_length('-barlevel-border-width'), 1);
+        let [hasBorderColor, barLevelBorderColor] =
+            themeNode.lookup_color('-barlevel-border-color', false);
+        if (!hasBorderColor)
+            barLevelBorderColor = barLevelColor;
+        let [hasActiveBorderColor, barLevelActiveBorderColor] =
+            themeNode.lookup_color('-barlevel-active-border-color', false);
+        if (!hasActiveBorderColor)
+            barLevelActiveBorderColor = barLevelActiveColor;
 
         const TAU = Math.PI * 2;
 

diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js
index 5bd91c7fab366f38888492c287d7d7e6ad850920..fe8cf780a67f44e6de3f40bd79776f97d764a011 100644 (file)
--- a/js/ui/osdWindow.js
+++ b/js/ui/osdWindow.js
@@ -4,6 +4,7 @@ const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
 const St = imports.gi.St;
 
+const BarLevel = imports.ui.barLevel;
 const Lang = imports.lang;
 const Layout = imports.ui.layout;
 const Main = imports.ui.main;
@@ -17,16 +18,17 @@ var LEVEL_ANIMATION_TIME = 0.1;
 
 var LevelBar = new Lang.Class({
     Name: 'LevelBar',
+    Extends: BarLevel.BarLevel,
 
     _init() {
         this._level = 0;
 
-        this.actor = new St.Bin({ style_class: 'level',
-                                  x_align: St.Align.START,
-                                  y_fill: true });
-        this._bar = new St.Widget({ style_class: 'level-bar' });
+        let params = {
+            styleClass: 'level',
+        }
+        this.parent(this._level, params);
 
-        this.actor.set_child(this._bar);
+        this.actor.accessible_name = _("Volume");
 
         this.actor.connect('notify::width', () => { this.level = this.level; });
     },
@@ -38,10 +40,7 @@ var LevelBar = new Lang.Class({
     set level(value) {
         this._level = Math.max(0, Math.min(value, 100));
 
-        let alloc = this.actor.get_allocation_box();
-        let newWidth = Math.round((alloc.x2 - alloc.x1) * this._level / 100);
-        if (newWidth != this._bar.width)
-            this._bar.width = newWidth;
+        this.setValue(this._level / 100);
     }
 });